<template>
  <div style="width: 50%">
    <div>
      <div id="parkdwCar" class="echartdwCar" ref="chart"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    linedataMore: Array,
  },
  data() {
    return {
      first: [],
      second: [],
      third: [],
      fourth: [],
        fontSize:14,
      padding:false,
    };
  },
  computed: {},
  watch: {},
  methods: {
      ScreenWidth(){
     
          if (screen.width <= 1920){
              this.fontSize=12;
              this.padding=false;
          }else{
             this.fontSize=14;
              this.padding=true;
          }
 },
    drawLine(n) {
      var that = this;
      that.ScreenWidth();
      for (let i = 0; i < n.series.length; i++) {
        this.first.push(n.series[i].data[0]);
        this.second.push(n.series[i].data[1]);
        this.third.push(n.series[i].data[2]);
        try{
            this.fourth.push(n.series[i].data[3]);
        }catch(e){

        }
       
      }
      // for (let i = 0; i < n.list.length; i++) {
      //   this.pname.push(n.list.yAxis_data);
      //   this.total.push(n.list[i].total);
      // }
      // 基于准备好的dom，初始化echarts实例
 
          const chart = this.$refs.chart;
  
      // 基于准备好的dom，初始化echarts实例

      var myChart = this.$echarts.init(chart); //推荐
      // 绘制图表
      let option = {
        tooltip: {
          trigger: "axis",
          position: function (p) {
            // 位置回调
            // //console.log && //console.log(p);
            return [p[0] + 10, p[1] - 10];
          },
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        // legend: {
        //   data: [
        //     "Direct",
        //     "Mail Ad",
        //     "Affiliate Ad",
        //     "Video Ad",
        //     "Search Engine",
        //   ],
        // },
        grid: {
          left: "0",
          right: "0",
          bottom: "0",
          top: "0",
          width: "90%",
          height: "100%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgb(52, 119, 188)",
              width: 1, //这里是为了突出显示加上的
            },
            textStyle: {
              color: "#fff",
              fontSize: that.fontSize,
            },
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#fff", //更改坐标轴文字颜色
              fontSize: that.fontSize, //更改坐标轴文字大小
            },
            rotate: 40,
          },
          // axisTick: {
          //   show: false,
          // },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: n.yAxis_data,
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0, //横轴信息全部显示
            textStyle: {
              color: "#fff",
              fontSize: that.fontSize,
            },
            formatter: function (params) {
              var val = "";
              if (params.length >= 13) {
                val = params.substr(0,13) + "...";
                return val;
              } else {
                return params;
              }
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgb(52, 119, 188)",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        dataZoom: [
          {
            type: "inside", //详细配置可见echarts官网
            show: false, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            start: 0, //伸缩条开始位置（1-100），可以随时更改
            end: 100, //伸缩条结束位置（1-100），可以随时更改
          },
          {
            type: "slider", //详细配置可见echarts官网
            show: false, //是否显示
            yAxisIndex: [0],
            // left: "93%", //滑动条位置
            startValue: 0, //初始化时，滑动条宽度开始标度
            endValue: 4, //初始化时，滑动条宽度结束标度<br data-filtered="filtered">
            width: 15,
            textStyle: {
              color: "rgba(0,0,0,0)",
            },
          },
          // {
          //   type: "inside", //内置滑动，随鼠标滚轮展示
          //   yAxisIndex: [0],
          //   start: 1, //初始化时，滑动条宽度开始标度<br data-filtered="filtered">                        end: 50  //初始化时，滑动条宽度结束标度
          // },
        ],
        series: [
          {
            name: "正式车辆",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            barWidth: 10,
            color: ["rgb(255, 246, 130)"],
            data: this.first,
          },
          {
            name: "临时车辆",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            color: ["rgb(1, 205, 245)"],
            data: this.second,
          },
          {
            name: "白名单车辆",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            color: ["rgb(69, 151, 253)"],
            data: this.third,
          },
          {
            name: "危化品车辆",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            color: ["rgb(144, 109, 255)"],
            data: this.fourth,
          },
          // {
          //   name: "Search Engine",
          //   type: "bar",
          //   stack: "total",
          //   label: {
          //     show: false,
          //   },
          //   emphasis: {
          //     focus: "series",
          //   },
          //   data: [820, 832, 901, 934, 1290, 1330, 1320],
          // },
        ],
      };
      setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[1].endValue == n.yAxis_data.length) {
          option.dataZoom[1].endValue = 4;
          option.dataZoom[1].startValue = 0;
        } else {
          option.dataZoom[1].endValue = option.dataZoom[1].endValue + 1;
          option.dataZoom[1].startValue = option.dataZoom[1].startValue + 1;
        }
        myChart.setOption(option);
      }, 3000);
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
  mounted() {
    this.drawLine(this.linedataMore[0]);
  },
};
</script>
<style lang="less" scoped>
.parkmanag {
  font-size: 23px;
  color: #fff;
  padding-bottom: 0.45vw;
}
.echartdwCar {
  height: 8vw;
}
</style>
